<template>
  <div class="monitor-view">
    <div>
      <el-button type="primary" @click="connectClick">连接</el-button>
      <el-button type="primary" @click="sendClick">发送</el-button>
      <el-button type="primary" @click="closeClick">关闭</el-button>
    </div>

<!--    <div class="server">-->
<!--      <div class="sever__head">-->
<!--        <span class="name">火山引擎</span>-->

<!--        <div class="status">-->
<!--          <span class="dot"></span>-->
<!--          <span>在线</span>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="server__basic">-->
<!--        <div class="item">-->
<!--          <i class="fa-solid fa-microchip"></i>-->
<!--          <span>{{ serverInfo.monitor.cpuCores }} 核</span>-->
<!--        </div>-->

<!--        <div class="item">-->
<!--          <i class="fa-solid fa-memory"></i>-->
<!--          <span>{{ serverInfo.monitor.totalMemory }} G</span>-->
<!--        </div>-->

<!--        <div class="item">-->
<!--          <i class="fa-solid fa-hard-drive"></i>-->
<!--          <span>{{ serverInfo.monitor.totalDisk }} G</span>-->
<!--        </div>-->

<!--        <div class="item">-->
<!--          <i class="fa-solid fa-power-off"></i>-->
<!--          <span>{{ serverInfo.monitor.uptime }} 天</span>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="server__usage">-->
<!--        <div class="item">-->
<!--          <span>CPU</span>-->
<!--          <el-progress type="circle" :width="60" :percentage="serverInfo.monitor.cpuUsage" />-->
<!--        </div>-->

<!--        <div class="item">-->
<!--          <span>内存</span>-->
<!--          <el-progress type="circle" :width="60" :percentage="serverInfo.monitor.memoryUsage" />-->
<!--        </div>-->

<!--        <div class="item">-->
<!--          <span>磁盘</span>-->
<!--          <el-progress type="circle" :width="60" :percentage="serverInfo.monitor.diskUsage" />-->
<!--        </div>-->

<!--        <div class="item">-->
<!--          <span>网络</span>-->
<!--          <div class="network">-->
<!--            <span>上行 {{ serverInfo.monitor.networkSpeed.tx }}</span>-->
<!--            <span>上行 {{ serverInfo.monitor.networkSpeed.rx }}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <el-table :data="serverInfo.monitor.topProcesses" border style="width: 100%">-->
<!--      <el-table-column prop="pid" label="PID" align="center" width="80" />-->
<!--      <el-table-column prop="name" label="name" align="center"/>-->
<!--      <el-table-column prop="user" label="user" align="center" width="80" />-->
<!--      <el-table-column prop="cpuUsage" label="cpu" align="center" width="60" />-->
<!--      <el-table-column prop="memUsage" label="mem" align="center" width="60" />-->
<!--    </el-table>-->
  </div>
</template>

<script setup lang="ts">
import { WebSocketUtil } from '@/utils/webSocketUtil'
import { reactive } from 'vue'

const webSocket = new WebSocketUtil('ws://43.225.157.27/ws/')

interface IProcesses {
  command: string;
  cpuUsage: number;
  memUsage: number;
  name: string;
  pid: number;
  user: string;
}

interface IServerMonitor {
  cpuCores: number;
  cpuModel: string;
  cpuUsage: number;
  diskUsage: number;
  memoryUsage: number;
  networkSpeed: {
    rx: string;
    tx: string;
  };
  systemInfo: string;
  systemLoad: {
    load1m: number;
    load5m: number;
    load15m: number;
  };
  topProcesses: IProcesses[];
  totalDisk: number;
  totalMemory: number;
  uptime: number;
}

const serverInfo = reactive({
  monitor: {
    cpuCores: 0,
    cpuModel: '',
    cpuUsage: 0,
    diskUsage: 0,
    memoryUsage: 0,
    networkSpeed: {
      rx: '',
      tx: ''
    },
    systemInfo: '',
    systemLoad: {
      load1m: 0,
      load5m: 0,
      load15m: 0
    },
    topProcesses: [],
    totalDisk: 0,
    totalMemory: 0,
    uptime: 0
  } as IServerMonitor
})

webSocket.on('onOpen', () => {
  console.log('连接成功')
})

webSocket.on('onMessage', (message: string) => {
  console.log(JSON.parse(message))
  serverInfo.monitor = JSON.parse(message).payload
})

webSocket.on('onClose', (event: CloseEvent) => {
  console.log('关闭连接')
})

const connectClick = () => {
  webSocket.connect()
}

const sendClick = () => {
  const sshInfo = {
    host: '43.225.157.27',
    username: 'root',
    password: '19940822Cxx'
  }
  webSocket.send(webSocket.formatMessage('serverMonitor', sshInfo))
}

const closeClick = () => {
  webSocket.close()
}
</script>

<style lang="scss">
.monitor-view {
  padding: 10px;
  height: 100%;
  background-color: gainsboro;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .server {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    background-color: #FFFFFF;

    display: flex;
    flex-direction: column;
    gap: 10px;

    .sever__head {
      display: flex;
      justify-content: space-between;

      .status {
        display: flex;
        align-items: center;

        .dot {
          display: inline-block;
          width: 12px;
          height: 12px;
          background-color: #4CAF50;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
    }

    .server__basic {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid lightgrey;
      color: gray;
      font-size: small;

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
      }
    }

    .server__usage {
      display: grid;
      grid-template-columns: repeat(3, 1fr) 120px;

      .item {
        display: grid;
        grid-template-rows: 25px 1fr;
        justify-items: center;
        align-items: center;
        gap: 5px;

        .el-progress {
          .el-progress__text {
            span {
              font-size: 1rem;
            }
          }
        }

        .network {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
      }
    }
  }
}
</style>
